<template>
  <div class="box">
    <build-el-h1 :name="name" type="2"></build-el-h1>
    <div class v-for="(item,index) in option" :key="index">
      <div class="alignText" v-if="item.type=='alignText'">
        <div class="t1">{{item.title}}</div>
        <div class="t2" v-for="(text,index) in item.text" :key="index">{{text}}</div>
      </div>
      <div class="leftText al-start" v-if="item.type=='leftText'">
        <div class="t1">{{item.title}}</div>
        <div class="t2" v-for="(text,index) in item.text" :key="index">{{text}}</div>
      </div>
      <div class="img" v-if="item.type=='img'">
        <div class="t1">{{item.title}}</div>
        <img :src="_img" v-for="(_img,index) in item.imgs" :key="index" />
      </div>
    </div>
  </div>
</template>
<script>
import buildElH1 from '../build-el-h1'
export default {
  props: {
    name: {
      type: String,
      default: '组织机构1.png', //标题图标的文件名字
    },
    option: {
      type: Array,
      default: () => [
        {
          type: 'leftText',
          title: '指导单位',
          text: ['中华人民和城乡建设部'],
        },
        {
          type: 'leftText',
          title: '主办单位',
          text: ['中国建筑装饰协会'],
        },
        {
          type: 'leftText',
          title: '协办单位',
          text: ['中华建筑报社'],
        },
        {
          type: 'leftText',
          title: '承办单位',
          text: [
            '中国设计年度人物评价办公室',
            '中国建筑装饰协会信息与科技委员会',
          ],
        },
        {
          type: 'leftText',
          title: '战略合作媒体',
          text: ['网易家居'],
        },
        // {
        //   type: 'img',
        //   title: '微信',
        //   imgs: [
        //     '',
        //   ],
        // },
      ],
    },
  },
  components: {
    buildElH1,
  },
}
</script>
<style lang="less" scoped>
.box {
  padding: 0 30px;
  // padding-bottom: 30px;
  .alignText,
  .leftText,
  .img {
    margin-bottom: 30px;
    .t1 {
      font-size: 18px;
      color: #333333;
      font-weight: bold;
      text-align: left;
      margin-bottom: 10px;
    }
    .t2 {
      max-width: 250px;
      font-size: 15px;
      color: #666666;
      text-align: left;
    }
    img {
      width: 120px;
      height: 120px;
    }
  }
  .leftText {
    .t1 {
      width: 100%;
      text-align: left;
    }
  }
}
</style>